import React from 'react';
import {ScrollView, View, Text, StyleSheet} from 'react-native';
import Button from '../../components/button';
import ThemeStyles from '../../styles';
import {getRealSize, Touchable} from '../../utils';
import PropTypes from 'prop-types';
import _ from 'lodash';
import {I18n} from '../../reducers/intl';
import Color from '../../styles/color';
import {ProductType} from '../../reducers/constant';

class FilterPanel extends React.Component {
  static propTypes = {
    sections: PropTypes.object,
    values: PropTypes.array,
    onSelected: PropTypes.func,
    onApply: PropTypes.func,
    onReset: PropTypes.func,
  };

  static defaultTypes = {
    sections: {},
    values: [],
    onSelected: () => {},
    onApply: () => {},
    onReset: () => {},
  };

  onSelectedItem = (field, value) => {
    const {onSelected} = this.props;
    onSelected(field, value);
  };

  render() {
    const {sections, values, type, onApply, onReset} = this.props;
    const options = Object.keys(sections);
    return (
      <View
        style={[
          ThemeStyles.Color.background.white,
          ThemeStyles.divider.horizontal,
          ThemeStyles.Layout.flex['1'],
        ]}>
        <ScrollView>
          <View style={Styles.container}>
            <Text style={Styles.title}>{I18n.t('form.label.productType')}</Text>
            <View style={Styles.content}>
              <ParamsBlock
                name={I18n.t('product.type.fixed')}
                selected={type === ProductType.fixed}
                onSelected={() =>
                  this.onSelectedItem('type', ProductType.fixed)
                }
              />
              <ParamsBlock
                name={I18n.t('product.type.remvArch')}
                selected={type === ProductType.remvArch}
                onSelected={() =>
                  this.onSelectedItem('type', ProductType.remvArch)
                }
              />
            </View>
          </View>
          {options.map(option => (
            <View style={Styles.container} key={option}>
              <Text style={Styles.title}>{I18n.t(`user.type.${option}`)}</Text>
              <View style={Styles.content}>
                {sections[option].map(param => (
                  <ParamsBlock
                    key={param}
                    name={param}
                    selected={_.includes(values, param)}
                    onSelected={() => this.onSelectedItem(option, param)}
                  />
                ))}
              </View>
            </View>
          ))}
        </ScrollView>
        <View
          style={[
            ThemeStyles.Layout.flex.row,
            ThemeStyles.Layout.flex.end,
            ThemeStyles.Layout.small.mv,
          ]}>
          <Button
            label={I18n.t('button.reset')}
            type="ghost"
            style={{marginRight: getRealSize(8)}}
            size="middle"
            width={48}
            onPress={() => onReset()}
          />
          <Button
            onPress={() => onApply()}
            label={I18n.t('button.confirm')}
            style={{marginRight: getRealSize(8)}}
            size="middle"
            width={48}
          />
        </View>
      </View>
    );
  }
}

const ParamsBlock = props => (
  <Touchable onPress={() => props.onSelected(props.name)}>
    <View style={[Styles.box, props.selected && Styles.selected]}>
      <Text style={[Styles.label, props.selected && Styles.selectedLabel]}>
        {props.name}
      </Text>
    </View>
  </Touchable>
);

export default FilterPanel;

const Styles = StyleSheet.create({
  container: {
    paddingVertical: getRealSize(8),
    borderBottomWidth: 1,
    borderBottomColor: Color.line.color,
    minHeight: getRealSize(98),
  },
  title: {
    marginHorizontal: getRealSize(8),
    paddingVertical: getRealSize(8),
  },
  content: {
    alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  box: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F7F7F7',
    width: getRealSize(86),
    height: getRealSize(42),
    // padding: getRealSize(8),
    marginLeft: getRealSize(8),
    marginBottom: getRealSize(8),
  },
  label: {
    fontSize: getRealSize(10),
    color: '#757575',
    textAlign: 'center',
  },
  selected: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#D7EAFF',
    // padding: getRealSize(8),
    width: getRealSize(86),
    height: getRealSize(42),
    marginLeft: getRealSize(8),
    marginBottom: getRealSize(8),
  },
  selectedLabel: {
    fontSize: getRealSize(10),
    color: '#317AFF',
  },
});
